<template>
    <!-- 个人资料修改 -->
    <div class="personalDataBox">
        <x-header :left-options="{showBack: true,backText:'个人资料修改'}" class="headerBox"></x-header>
        <div class="perbox">
            <uploader
                    :images="images"
                    :upload-url="uploadUrl"
                    :showTip="false"
                    :showHeader="false"
                    size="small"
                    class="uploadBox"
                    @resImg="resImg"
            ></uploader>
            <img v-if="userInfo.largeAvatar !=''" :src="userInfo.largeAvatar" class="img01" v-model="largeAvatar"/>
            <img v-else src="../assets/images/avatar.png" class="img01"/>
            <img src="../assets/images/Imagechange@003x.png" class="img02"/>
            <div class="perNU-box">
                <div class="perName">{{userInfo.nickName}}</div>
                <div class="perUser">用户名：{{userInfo.nickName}}</div>
                <div class="perUser" v-if="vipInfo!='none'">会员等级：{{vipInfo.name}}</div>
                <div class="perUser" v-if="vipInfo!='none'">到期时间：{{vipInfo.endTimeStr}}</div>
            </div>
        </div>

        <div class="w">
            <div class="perContent-name"></div>
            <div class="perContent-name">真实姓名</div>
            <input class="nameVal" v-model="names"/>
            <div class="perBrief">个人简介</div>
            <textarea class="perBrief-text" placeholder="点击添加文本" v-model="signatures"></textarea>
        </div>
        <div class="footerBox" @click="goInBtn()">保存修改</div>
    </div>
</template>

<script>
    import {XHeader} from 'vux'
    import {userInfo, updateUserInfo} from '@/api/index/index'
    import store from '../store/store'
    import Uploader from '../components/Uploader'

    export default {
        components: {
            XHeader,
            Uploader
        },
        data() {
            return {
                userInfo: '',
                vipInfo: '',
                userId: '',
                names: '',
                signatures: '',
                uploadUrl: '',
                images: [{url: ''}],
                largeAvatar:''
            }
        },
        mounted() {
            userInfo(this.$store.state.user.id).then(res => {
                console.log(res.data.data);
                this.userInfo = res.data.data.userInfo;
                this.largeAvatar=res.data.data.userInfo.largeAvatar;
                this.vipInfo = res.data.data.vipInfo;
                this.userId = res.data.data.userInfo.id;
                this.names = res.data.data.userInfo.name;
                this.signatures = res.data.data.userInfo.signature;
            })
                .catch(err => {
                    console.log(err)
                })
        },
        methods: {
            resImg(data) {
                this.userInfo.largeAvatar = data;
                this.largeAvatar = data;
            },
            // 登录
            goInBtn() {
                console.log(this.names);
                console.log(this.signatures);
                console.log(this.largeAvatar);
                updateUserInfo(this.names, this.signatures,this.largeAvatar, this.userId).then(res => {
                    console.log(res.data.data);
                    if (res.data.data.status == "true") {
                        this.$vux.alert.show({
                            title: '修改成功'
                        });
                        this.$router.push({name: 'mine'})
                        // this.userInfo = res.data.data.userInfo;

                    } else if (res.data.data.status == "false") {
                        this.$vux.alert.show({
                            title: '修改失败'
                        });
                    }
                }).catch(err => {
                    console.log(err)
                });


            },
        }
    }
</script>

<style lang="less" scoped>
    .personalDataBox {
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }
        }

        .perbox {
            padding: 50px 20px;
            background-color: #1a1e2d;
            position: relative;
            display: flex;
            align-items: flex-start;

            /deep/ .uploadBox {
                position: absolute;
                width: 135px;
                height: 135px;
                opacity: 0;

                .weui-uploader__input-box.remove {
                    display: none !important;
                }

                .weui-uploader__input-box {
                    display: block !important;
                }

                .weui-uploader__files {
                    display: none;
                }
            }

            .img01 {
                width: 135px;
                height: 135px;
            }

            .img02 {
                width: 45px;
                height: 45px;
                position: absolute;
                top: 145px;
                left: 120px;
            }

            .perNU-box {
                margin-left: 40px;

                .perName {
                    color: #fff;
                    font-size: 35px;
                    margin-bottom: 10px;
                }

                .perUser {
                    color: #99a0ae;
                    font-size: 30px;
                    margin: 10px 0;
                }
            }
        }

        .w {
            padding: 20px;
            height: 100%;

            .perContent-name {
                color: #828384;
                font-size: 30px;
            }

            .nameVal {
                outline: none;
                border: none;
                width: 100%;
                font-size: 30px;
                padding: 30px 0;
                border-bottom: 1px solid #f3f3f4;
            }

            .perBrief {
                color: #828384;
                font-size: 30px;
                padding: 30px 0;
            }

            .perBrief-text {
                width: 100%;
                height: 500px;
                box-sizing: border-box;
                background-color: #f7f8f9;
                padding: 20px;
                line-height: 1.4;
                font-size: 28px;
                outline: none;
                border: none;
                resize: none;
            }
        }

        .footerBox {
            width: 75%;
            margin: 0px auto;
            margin-bottom: 20px;
            background: linear-gradient(to right, #95c9fa, #54b2e9);
            font-size: 30px;
            padding: 20px 50px;
            border-radius: 30px;
            color: #fff;
            text-align: center;
        }
    }
</style>